<template>
    <el-config-provider :locale="store.localeLang">
        <div class="login">
            <el-drawer
                v-model="drawer"
                size="80%"
                direction="ltr"
                :show-close="false"
                :before-close="handleDrawer"
                style="background-color: #1c3f56"
                :with-header="false"
            >
                <Drawer :drawer="drawer" />
            </el-drawer>
            <router-view v-slot="{ Component }">
                <keep-alive :exclude="route11">
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>
    </el-config-provider>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, watch, provide, nextTick } from 'vue';
import { ElConfigProvider } from 'element-plus';
import Drawer from './views/login/modelComponents/Drawer.vue';
import { ipoStore } from '@/stores/ipo';
import { getCurrentInstance } from 'vue';
import {  getIPAddress, postuv } from './api/reqIpo/ipo';

const drawer = ref(false);
const { proxy } = getCurrentInstance() as any;
const showRouter = ref(true);
const route11 = ref(['', 'XIPO', 'Xdashboard']);
const reflashRouter = () => {
    showRouter.value = false;
    setTimeout(() => {
        showRouter.value = true;
    }, 1);
};
const handleOnDrwaer = (bool: boolean) => {
    console.log('dakai', bool);
    drawer.value = bool;
};
provide('reflashRouter', reflashRouter);
provide('handleOnDrwaer', handleOnDrwaer);
const store = ipoStore();
onBeforeMount(() => {
    setFontSize();
});
const count = ref(0);
const userIP = ref()

let debounceTimeout: number | undefined
document.body.addEventListener(
    'click',
    e => {
        clearTimeout(debounceTimeout);
        debounceTimeout = setTimeout(async () => {
            userIP.value =await getIPAddress()
            console.log('userip',userIP.value.data);
            postuv({ clicks: '1',IPAddress:userIP.value.data})
           
        }, 500); // 这里设置防抖延迟时间为 500 毫秒
    },
    true
);
onMounted(() => {
//    window.RTCPeerConnection = window.RTCPeerConnection //compatibility for Firefox and chrome
//   var pc = new RTCPeerConnection({iceServers:[]}), noop = function(){};      
//   pc.createDataChannel(''); //create a bogus data channel
//   pc.createOffer(pc.setLocalDescription.bind(pc), noop); // create offer and set local description
//   pc.onicecandidate = function(ice){
//     console.log('ice',ice);
    
//       if (ice && ice.candidate && ice.candidate.candidate){
//       console.log('ice.candidate.candidate',ice.candidate.candidate);
      
//         const match = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/.exec(ice.candidate.candidate);
//         console.log('match',match);
        
//   if (match) {
//     const myIP = match[1];
//     console.log('my IP: ', myIP);
//   }
//   pc.onicecandidate = noop;
//      }
// };


//   const localIPs: { [key: string]: boolean } = {};
//     var myPeerConnection =
//         window.RTCPeerConnection
//     var pc = new myPeerConnection({ iceServers: [] }),
//         noop = function () {};
//     pc.createDataChannel('');
//     pc.createOffer()
//         .then(function (sdp) {
//             (sdp.sdp as string).split('\n').forEach(function (line) {
//                 if (line.indexOf('candidate') < 0) return;
//                 if (line.match(ipRegex)){
//                   line.match(ipRegex)?.forEach(function (ip) {
//                     localIPs[ip] = true;
//                 })
//                 }
                
                
              
//             });
//             pc.setLocalDescription(sdp, noop, noop);
//         })
//         .catch(function (reason) {
//             console.log(reason);
//         });
//     var ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
//     var ips = Object.keys(localIPs);
//     console.log('ip',ips[0]);
//   const express = require('express');
// const app = express();
 
// app.get('/', (req: { headers: { [x: string]: any; }; connection: { remoteAddress: any; }; }, res: { send: (arg0: string) => void; }) => {
//     const userIpAddress = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
//     console.log(userIpAddress);
//     res.send('User IP Address: ' + userIpAddress);
// });
 
// app.listen(3000, () => {
//     console.log('Server is running on port 3000');
// });
// fetch('https://api.ipify.org?format=json')
// .then(response => response.json())
// .then(json => userIP.value = json.ip)

    let screenWidth = 1500;
    let screenheight = 700;
    document.documentElement.style.setProperty('--screen', screenWidth + '');
    document.documentElement.style.setProperty('--height', screenheight + '');
    const langHref = window.location.href.split('home')[1];
    if (langHref == '?lang=en') {
        proxy.$i18n.locale = 'en';
        store.setLocale(1);
    } else if (langHref == '?lang=tc') {
        proxy.$i18n.locale = 'zhCt';
        store.setLocale(2);
    } else if (langHref == '?lang=sc') {
        proxy.$i18n.locale = 'zhCn';

        store.setLocale(3);
    }
    reflashRouter();
});
const setFontSize = () => {
    // 以ipone6手机为例,1rem=1px;   以后就在ipone6手机模拟器开发，把rem当作px用就行了
    var font = document.documentElement.clientWidth / 375;
    document.documentElement.style.fontSize = font + 'px';
};
const handleDrawer = (done: () => void) => {
    done();
};
</script>

<style lang="scss">
.login {
    background-image: url('@/assets/1x/beijingtu.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    @media screen and (max-width: 768px) {
        max-width: 100vw;
        overflow: auto;
        overflow-x: hidden;
        height: 100%;
    }
}
</style>
